<template>
    <view style="padding-bottom: 150rpx">
        <u-loading-page :loading="is_loading"></u-loading-page>
        <u-navbar :title="info.tree.name" :placeholder="true">
            <view class="u-nav-slot" slot="left"
                  style="display:flex;align-items:center;justify-content:space-around;padding:3px 8px 3px 7px;opacity:.8;flex-direction:row;border:0.5px #c8c9cc solid;border-radius:200rpx;">
                <u-icon name="arrow-left" size="19" @click="$returnPage()"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="20" @click="$returnPage(true)"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <!-- 使用u-icon作为分享图标 -->
                <button class="share-btn" open-type="share">
                    <u-icon
                        @click="shareToFriend()"
                        name="share"
                        size="24"
                    ></u-icon>
                </button>
                <!-- 可选：添加文字 -->
            </view>
        </u-navbar>
        <view style="position: relative" v-if="!$u.test.isEmpty(info.tree.images)">
            <!--            <u-swiper-->
            <!--                indicator-active-color="#25722e"-->
            <!--                indicator-color="#35b949"-->
            <!--                @click="look_img" :interval="5000" :list="info.tree.images" :indicator="true" indicatorMode="line"-->
            <!--                height="500" radius="0"></u-swiper>-->

            <u-swiper
                :list="swiperList"
                :height="swiperHeight"
                :autoplay="false"
                indicator-active-color="#25722e"
                indicator-color="#35b949"
                :indicator="true"
                :showIndicator="true"
                indicatorMode="dot"
                interval="5000"
                circular
                radius="0"
                @click="look_img"
                @change="onSwiperChange"
            >
                <template #item="{ item, index }">
                    <view class="swiper-item" :key="index" @click="look_img">
                        <!-- 根据类型渲染图片或视频 -->
                        <image
                            v-if="item.type === 'image'"
                            :src="item.url"
                            :data-src="item.url"
                            mode="widthFix"
                            class="swiper-media"
                            @load="onImageLoad"
                            @error="onImageError"
                            :style="'width: 100%; height: auto;'"
                        ></image>

                        <video
                            v-else-if="item.type === 'video'"
                            :src="item.url"
                            id="myVideo"
                            @play="togglePlay"
                            @longpress="onVideoLongPress"
                            loop
                            muted
                            playsinlin
                            :controls="true"
                            class="swiper-media"
                        ></video>
                    </view>
                </template>
            </u-swiper>
            <!-- 右上角索引显示 -->
            <view class="index-tag">
                <text>{{ currentIndex + 1 }}/{{ swiperList.length }}</text>
            </view>
            
            <!-- u-swiper下方的数量显示小图标 -->
            <view class="swiper-counter-icon" @click="goToMediaDetail">
                <view class="counter-icon-container">
                    <text class="counter-text">{{mediaCount }}</text>
                </view>
            </view>

        </view>
        <view class="content" style="padding: 50rpx;box-sizing: border-box; background: #fff" v-if="info.tree">
            <view style="font-size: 18px;font-weight: bolder;margin-bottom: 30rpx; display: flex; justify-content: space-between; align-items: center;">
                <text style="color:#25772f">
                    {{ info.tree.name }}
                </text>
                <view class="user-info"  v-if="user.nickname">
                    <image :src="user.avatarUrl || '/static/userImage.png'" class="user-avatar"></image>
                    <text class="user-name">{{ user.nickname }}</text>
                </view>
            </view>
            <!--			<view class="item-footer" style="margin-top: 30rpx;">-->
            <!--				<view class="d-f-j-i">-->
            <!--					<view class="d-f-j-i"-->
            <!--						style="justify-content: flex-start;color: #1487f4;margin-right: 10rpx;min-width: 70px;">-->
            <!--						<u-icon name="tags" size="14" color=""></u-icon>-->
            <!--						<span style="margin-left: 5rpx;font-size: 14px;">树种:{{ info.category.name }}</span>-->
            <!--					</view>-->
            <!--					<view @click="to_daohang" v-if="info.community_id" class="d-f-j-i" style="justify-content: flex-start;color: #1487f4;">-->
            <!--						<u-icon name="map-fill" size="14" color=""></u-icon>-->
            <!--						<span-->
            <!--							style="margin-left: 5rpx;font-size: 14px;">佳期:{{ info.community.name }}</span>-->
            <!--					</view>-->
            <!--				</view>-->
            <!--			</view>-->
            <view style="margin-bottom: 30rpx;margin-top: 30rpx;">
                <!-- 价格标识 -->
                <view class="waterfall-item__price d-f-j-i">
                    <view class="d-f-j-i"
                          style="justify-content: flex-start;color: #636363;margin-right: 10rpx;width:50%;">
                        <u-icon name="integral" size="18" color="#636363"></u-icon>
                        <span style="margin-left: 5rpx;font-size: 16px;">树种:{{ info.tree.treeSpecies }}</span>
                    </view>
                    <view class="d-f-j-i"
                          style="justify-content: flex-start;color: #636363;margin-right: 10rpx;width:50%;">
                        <u-icon name="calendar" size="18" color="#636363"></u-icon>
                        <span style="margin-left: 5rpx;font-size: 16px;">佳期:{{ info.bestPeriodDesc }}</span>
                    </view>
                </view>
            </view>
            <view style="margin-bottom: 30rpx;margin-top: 30rpx;">
                <!-- 价格标识 -->
                <view class="waterfall-item__price d-f-j-i">
                    <view class="d-f-j-i"
                          style="justify-content: flex-start;color: #636363;margin-right: 10rpx;width:50%;">
                        <u-icon name="grid" size="18" color="#636363"></u-icon>
                        <span style="margin-left: 5rpx;font-size: 16px;">类别:{{ info.categoryDesc }}</span>
                    </view>
                    <view class="d-f-j-i"
                          style="justify-content: flex-start;color: #636363;margin-right: 10rpx;width:50%;">
                        <u-icon name="map" size="18" color="#636363"></u-icon>
                        <span style="margin-left: 5rpx;font-size: 16px;">距您:{{ info.formattedDistance }}</span>
                    </view>
                </view>
            </view>
            <!-- 树描述 -->
            <view>
                <u-parse style="color: #6d6d6d;font-size: 14px" :content="info.tree.description"
                         :selectable="true"></u-parse>
            </view>
            
            <!-- 纠错按钮 -->
            <view class="correction-button-wrapper" style="margin-top: 20rpx;">
                <view class="correction-button" @click="openCorrectionModal">
                    <u-icon name="edit-pen" size="16" color="#666"></u-icon>
                    <text class="correction-text">发现错误？点击纠错</text>
                </view>
            </view>
            <!-- <view style="margin-top: 30rpx;" v-if="!$u.test.isEmpty(info.images_arr)">
                <u-album :urls="info.images_arr" :singleSize="180" :multipleSize="105" :rowCount="3"></u-album>

            </view> -->
            <view class="map-info">
                <view style="display: flex;justify-content: center;align-items: center;">
                    <image :src="info.tree.imageUrl" mode=""
                           style="width: 80rpx;height: 80rpx;border-radius:15rpx;margin-right: 15rpx;"></image>
                    <view style="line-height: 50rpx;">
                        <view style="font-weight: bold;">{{ info.tree.name }}</view>
                        <!--						<view style="display: flex;align-items: center;">-->
                        <!--							<span v-if="info.user.community_id == userInfo.community_id"-->
                        <!--								style="transform:scale(0.8);margin-left: -10rpx;">-->
                        <!--								<u-tag type="success" text="同地点" size="mini" plain plainFill></u-tag>-->
                        <!--							</span>-->
                        <!--							<span v-if="info.community_id" style="transform:scale(0.8);margin-left: -15rpx;">-->
                        <!--								<u-tag icon="map" :text="info.community.name" size="mini" plain plainFill></u-tag>-->
                        <!--							</span>-->
                        <!--						</view>-->
                    </view>
                </view>

                <view class="map-class" @click="to_daohang">
                    <span style="margin-left: 5rpx;font-size: 14px;">查看地理位置</span>
                    <u-icon name="arrow-right" color="#25772f" size="19"></u-icon>
                </view>
                <!--					<view class="">-->
                <!--						<view style="color: #797979;font-size: 24rpx;">-->
                <!--							发布于{{$u.timeFormat(info.createtime, 'yyyy-mm-dd')}}-->
                <!--						</view>-->
                <!-- <u-button type="error" size="mini" icon="phone-fill" @click="get_contact">联系TA</u-button> -->
                <!--					</view>-->
            </view>
            <view style="margin-top: 30rpx;">
                <hb-comment ref="hbComment" @add="addComment" @del="delComment" like="" focusOn=""
                            @loadMore="get_comment" :deleteTip="'您确定需要删除本条评论信息吗？'" :cmData="commentData"
                            v-if="commentData"></hb-comment>
            </view>
        </view>
        
        <!-- 纠错弹框 -->
        <view class="correction-modal" v-if="showCorrectionModal" @click="closeCorrectionModal">
            <view class="correction-content" @click.stop="stopPrevent">
                <view class="correction-header">
                    <text class="correction-title">信息纠错</text>
                    <view class="correction-close" @click="closeCorrectionModal">
                        <u-icon name="close" size="20" color="#999"></u-icon>
                    </view>
                </view>
                
                <view class="correction-form">
                    <view class="form-group">
                        <text class="form-label">错误描述：</text>
                        <textarea 
                            class="correction-textarea" 
                            v-model="correctionForm.content" 
                            placeholder="请描述您发现的错误信息..."
                            maxlength="500"
                            :show-confirm-bar="false"
                        ></textarea>
                        <view class="word-count">{{correctionForm.content.length}}/500</view>
                    </view>
                    
                    <view class="form-group">
                        <text class="form-label">相关图片（可选）：</text>
                        <view class="upload-section">
                            <u-upload 
                                :fileList="correctionForm.images" 
                                @afterRead="onCorrectionImageUpload" 
                                @delete="onCorrectionImageDelete" 
                                name="correction" 
                                multiple
                                :maxCount="3" 
                                :previewFullImage="true" 
                                :width="120" 
                                :height="120"
                            ></u-upload>
                        </view>
                    </view>
                </view>
                
                <view class="correction-footer">
                    <view class="correction-btn cancel-btn" @click="closeCorrectionModal">取消</view>
                    <view class="correction-btn submit-btn" @click="submitCorrection">提交</view>
                </view>
            </view>
        </view>
        
        <authuserInfo ref="auth_userInfo"></authuserInfo>
        <authPhone ref="auth_phone"></authPhone>
        <view class="fixed-bottom-container">
            <!--            评论-->
            <view class="u-nav-slots" @click="select_community">
                <u-icon name="edit-pen" size="19" color="#333"></u-icon>
                <!--					<span style="margin-left: 10rpx;font-size: 14px;">{{ community_name }}</span>-->
                <span style="margin-left: 10rpx;font-size: 14px;">说点什么...</span>
            </view>
            <!-- 第一个按钮 -->
            <view class="bottom-button" @click="onButton1Click">
                <view class="button-content">
                    <u-icon v-if="info.wishFlag" name='star-fill' color="red" size="24"></u-icon>
                    <u-icon v-if="!info.wishFlag" name="star" color="#999" size="24"></u-icon>
                    <text class="button-text">{{ info.wishCount }}</text>
                </view>
            </view>

            <!-- 第二个按钮 -->
            <view class="bottom-button" @click="onButton2Click">
                <view class="button-content">
                    <image  v-if="info.visitFlag" src="/static/zuji1.png" class="button-content-img"></image>
                    <image  v-if="!info.visitFlag" src="/static/zuji.png" class="button-content-img"></image>
                    <text class="button-text">{{info.visitCount}}</text>
                </view>
            </view>
            <!-- 第三个按钮 -->
            <view class="bottom-button" >
                <view class="button-content">
                    <u-icon name="chat" size="25" color="#333"></u-icon>
                  <text class="button-text">{{info.commentCount}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import authuserInfo from "@/components/auth-userinfo/auth-userinfo.vue"
import authPhone from "@/components/auth-phone/auth-phone.vue"

export default {
    components: {
        authuserInfo,
        authPhone,
    },
    data() {
        return {
            information_id: null, //lat=30.256789&lon=120.145678
            lat: null,
            lon: null,
            info: {
                title: '加载中...',
                tree: {}
            },
            is_loading: true,
            userInfo: {
                id: 0,
                community_id: 0
            },
			user:{
				nickname:'',
				
			},
            commentData: {
                comment: []
            },
            swiperList: [],
            swiperHeight: 250, // 初始轮播高度
            currentIndex: 0, // 当前轮播索引
            cursor: '', // 当前轮播索引
            hasMore: false, // 当前轮播索引
            autoplay: true, // 当前轮播索引
            videoContext: null, // 当前轮播索引
          mediaCount: 0, // 媒体数量统计
            // 纠错相关数据
            showCorrectionModal: false, // 控制纠错弹框显示
            correctionForm: {
                content: '', // 纠错内容
                images: [], // 上传的图片
                imageUrls: [] // 图片URL列表
            },
            
            // 视频分享数据
            shareVideoData: null // 存储当前需要分享的视频数据
        };
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            console.log(res.target)
        }
        
        // 如果有视频分享数据，优先使用
        if (this.shareVideoData) {
            const shareData = {
                title: this.shareVideoData.title,
                path: this.shareVideoData.path || 'pages/information/information?information_id=' + this.info.tree.id,
                imageUrl: this.shareVideoData.imageUrl
            }
            // 清除分享数据
            this.shareVideoData = null
            return shareData
        }
        
        // 默认分享页面内容
        return {
            title: this.info.tree.name,
            path: '/packageB/information/information?information_id=' + this.info.tree.id,
            imageUrl: !uni.$u.test.isEmpty(this.info.tree.imageUrl) ? this.info.tree.imageUrl : ''
        }
    },
    onReady() {
        // 获取视频上下文对象
        this.videoContext = uni.createVideoContext('myVideo', this);
    },
    // 分享给好友（微信小程序示例）
    onShareTimeline(res) {
        if (res.from === 'button') {
            console.log(res.target)
        }
        
        // 如果有视频分享数据，优先使用
        if (this.shareVideoData) {
            const shareData = {
                title: this.shareVideoData.title,
                imageUrl: this.shareVideoData.imageUrl
            }
            // 清除分享数据
            this.shareVideoData = null
            return shareData
        }
        
        // 默认分享页面内容
        return {
            title: this.info.tree.name,
            imageUrl: !uni.$u.test.isEmpty(this.info.tree.imageUrl) ? this.info.tree.imageUrl : ''
        }
    },
    async onShow() {
        // 已经登录了，容差判断资料
        if (uni.getStorageSync('token')) {
            let userInfo = uni.getStorageSync('userInfo')
            if (!userInfo || userInfo.nickname == '') {
                this.$refs.auth_userInfo.openAuth()
            } else {
                if (userInfo.mobile == '') {
                    // this.$refs.auth_phone.openAuth()
                }
            }
			this.user=userInfo
        }
        this.get_comment(true)
        await this.get_info()
        // 获取媒体数量统计
        this.getMediaCount()
    },
    async onLoad(e) {

        // this.userInfo = uni.getStorageSync('userInfo')
        // if (uni.$u.test.isEmpty(this.userInfo)) {
        //     // 需要登录
        //     await this.$wechatLogin()
        //     this.userInfo = uni.getStorageSync('userInfo')
        //     if (!this.userInfo || this.userInfo.nickname == '') {
        //         this.$refs.auth_userInfo.openAuth()
        //     }
        // }
        this.information_id = e.information_id
        this.lat = uni.getStorageSync('latitude')
        this.lon = uni.getStorageSync('longitude')
    },
    // 页面卸载时暂停所有视频
    onUnload() {
        this.swiperList.forEach((item, index) => {
            if (item.type === 'video') {
                const videoContext = uni.createVideoContext(`video-${index}`);
                videoContext.pause();
            }
        });
    },
    methods: {
      select_community(){
        this.$refs.hbComment.commentInput(false)
      },
        // 跳转到媒体详情页面
        goToMediaDetail() {
            if (this.swiperList.length === 0) {
                uni.showToast({
                    title: '暂无媒体内容',
                    icon: 'none'
                });
                return;
            }
            
            // 检查距离限制
            const distance = parseFloat(this.info.formattedDistance || '0');
            if (distance > 500) {
                uni.showModal({
                    title: '距离限制',
                    content: '抱歉，距离树木500米内，才能打开时空胶囊，感谢您的理解',
                    showCancel: false,
                    confirmText: '知道了'
                });
                return;
            }

            // 准备传递的数据
            const mediaData = encodeURIComponent(JSON.stringify(this.swiperList));
            const title = encodeURIComponent(this.info.tree.name + ' - 媒体详情');
            const treeId = this.information_id

            // 跳转到媒体详情页面
            uni.navigateTo({
                url: `/packageB/information/media-detail?mediaData=${mediaData}&title=${title}&treeId=${treeId}`,
                success: () => {
                    console.log('跳转媒体详情页面成功');
                },
                fail: (err) => {
                    console.error('跳转失败:', err);
                    uni.showToast({
                        title: '跳转失败',
                        icon: 'none'
                    });
                }
            });
        },

        // 获取媒体数量统计
        getMediaCount() {
            if (!this.information_id) {
                console.warn('缺少 information_id 参数')
                return
            }

            this.$http.to_http('system/userLetters/letterCount', {
                treeId: this.information_id
            }, 'GET', false).then(res => {
                res = res.data
                if (res.code === 200) {
                    this.mediaCount =  res.data
                    console.log('媒体数量统计:', this.mediaCount)
                } else {
                    console.warn('获取媒体数量失败:', res.msg)
                    // 如果接口失败，使用本地轮播数量作为备选
                    this.mediaCount = this.swiperList.length
                }
            }).catch(err => {
                console.error('获取媒体数量错误:', err)
                // 如果接口错误，使用本地轮播数量作为备选
                this.mediaCount = this.swiperList.length
            })
        },
        // 播放当前索引对应的视频（若为视频项）
        playCurrentVideo(index) {
            console.log(1111, index)
            // 获取当前视频组件实例
            const videoId = `video-${index}`;
            const videoContext = uni.createVideoContext(videoId, this);

            // 播放视频（静音状态下通常可自动播放）
            videoContext.play();
        },
        // 图片加载完成事件 - 微信小程序优化版本
        onImageLoad(e) {
            // #ifdef MP-WEIXIN
            // 微信小程序中需要使用 uni.getImageInfo 获取图片信息
            let imageSrc = e.target?.dataset?.src || e.currentTarget?.dataset?.src;
            if (!imageSrc && e.detail && e.detail.src) {
                imageSrc = e.detail.src;
            }
            if (!imageSrc && this.swiperList && this.swiperList[this.currentIndex]) {
                imageSrc = this.swiperList[this.currentIndex].url;
            }
            
            if (imageSrc) {
                uni.getImageInfo({
                    src: imageSrc,
                    success: (res) => {
                        this.calculateSwiperHeight(res.width, res.height);
                    },
                    fail: (err) => {
                        console.log('获取图片信息失败:', err);
                        this.swiperHeight = 250;
                    }
                });
            }
            // #endif
            
            // #ifndef MP-WEIXIN
            // 其他平台使用原有逻辑
            const { width, height } = e.detail;
            if (width && height) {
                this.calculateSwiperHeight(width, height);
            }
            // #endif
        },
        // 图片高度计算逻辑
        calculateSwiperHeight(width, height) {
            // 计算适应屏幕宽度的高度
            const systemInfo = uni.getSystemInfoSync();
            const screenWidth = systemInfo.screenWidth;
            const aspectRatio = height / width;
            const calculatedHeight = screenWidth * aspectRatio;
            
            // 设置最大和最小高度限制
            const maxHeight = 600; // 最大高度
            const minHeight = 200; // 最小高度
            
            let finalHeight = Math.max(minHeight, Math.min(maxHeight, calculatedHeight));
            
            // 只有当计算出的高度与当前不同时才更新
            if (Math.abs(this.swiperHeight - finalHeight) > 10) {
                this.swiperHeight = finalHeight;
                // 强制更新视图
                this.$forceUpdate();
            }
        },
        // 图片加载失败事件
        onImageError(e) {
            console.log('图片加载失败:', e);
            // 如果图片加载失败，设置默认高度
            this.swiperHeight = 250;
        },
        // 计算第一张图片高度 - 微信小程序专用
        calculateFirstImageHeight() {
            // #ifdef MP-WEIXIN
            if (this.swiperList && this.swiperList.length > 0) {
                const firstImage = this.swiperList.find(item => item.type === 'image');
                if (firstImage && firstImage.url) {
                    setTimeout(() => {
                        uni.getImageInfo({
                            src: firstImage.url,
                            success: (res) => {
                                this.calculateSwiperHeight(res.width, res.height);
                            },
                            fail: (err) => {
                                console.log('获取第一张图片信息失败:', err);
                            }
                        });
                    }, 100); // 稍微延迟以确保数据已加载
                }
            }
            // #endif
        },

        // shareToFriend() {
        //     uni.share({
        //         provider: 'weixin',
        //         scene: 'WXSceneSession',
        //         type: 0,
        //         title: this.info.tree.name,
        //         path: 'pages/information/information?information_id=' + this.info.tree.id,
        //         imageUrl: !uni.$u.test.isEmpty(this.info.tree.imageUrl) ? this.info.tree.imageUrl : '',
        //         success: () => {
        //             uni.showToast({ title: '分享成功', icon: 'success' });
        //         },
        //         fail: (err) => {
        //             console.log('分享失败', err);
        //             uni.showToast({ title: '分享失败', icon: 'none' });
        //         }
        //     });
        // },
        // 轮播切换事件
        onSwiperChange(e) {
            // // 暂停上一个视频
            // if (this.swiperList[this.currentIndex]?.type === 'video') {
            //     const prevVideoContext = uni.createVideoContext(`video-${this.currentIndex}`);
            //     prevVideoContext.pause();
            // }
            // // 更新当前索引
            this.autoplay = true;
            console.log('huadong', e)
            this.currentIndex = e.current;
            // autoplay
            //
            // // 自动播放当前视频
            if (this.swiperList[this.currentIndex]?.type === 'video') {
                const currentVideoContext = uni.createVideoContext(`video-${this.currentIndex}`);
                currentVideoContext.play();
            }
        },
        // 按钮点击事件处理函数
        onButton1Click() {
            // relationType= "wishlist"(想去) 或 "visited"(去过)
            return new Promise((suc, err) => {
              let url = this.info.wishFlag?`DELETE`: `POST`
			  let messageInfo=this.info.wishFlag?`取消想去~`: `想去~`
                this.$http.to_http(`search/${this.information_id}/relation?relationType=wishlist`, {}, url, false).then(res => {
                // this.$http.to_http(url, {}, 'POST', false).then(res => {
                    res = res.data
                    if (res.code == 401) {
                        return uni.showToast({
                            title: '信息过期，请先登录',
                            icon: "none"
                        })
                    } else if (res.code != 200) {
                        return uni.showToast({
                            title: res.msg,
                            icon: "none"
                        })
                    }

                  if( this.info.wishFlag){
                    this.info.wishCount--
                  }else {
                    this.info.wishCount++
                  }
                  this.info.wishFlag = !this.info.wishFlag
                    suc(true);
                    return uni.showToast({
                        title:  messageInfo,
                        icon: "none"
                    })
                })
            })
        },
        onButton2Click() {
            // relationType= "wishlist"(想去) 或 "visited"(去过)
          let url = this.info.visitFlag? `DELETE`: `POST`
		   let messageInfo=this.info.visitFlag?`取消去过~`: `去过~`
            return new Promise((suc, err) => {
                this.$http.to_http(`search/${this.information_id}/relation?relationType=visited`, {}, url, false).then(res => {
                    res = res.data
                    if (res.code == 401) {
                        return uni.showToast({
                            title: '信息过期，请先登录',
                            icon: "none"
                        })
                    } else if (res.code != 200) {
                        return uni.showToast({
                            title: res.msg,
                            icon: "none"
                        })
                    }
                  if( this.info.visitFlag){
                    this.info.visitCount--
                  }else {
                    this.info.visitCount++
                  }
                  this.info.visitFlag = !this.info.visitFlag
                  suc(true);
                  return uni.showToast({
                    title:  messageInfo ,
                    icon: "none"
                  })
                    suc(true);
                    // return uni.showToast({
                    //     title: "去过~~",
                    //     icon: "none"
                    // })
                })
            })
        },
        to_daohang() {
            let lon = this.info.tree.longitude
            let lat = this.info.tree.latitude
			if(this.info.tree.collectIds&&this.info.tree.collectIds.length>0){
				uni.navigateTo({
				    url: "/packageB/information/index?information_ids="+this.info.tree.collectIds+'&name='+this.info.tree.name
				})
			}else{
				uni.openLocation({
				    latitude: lat,
				    longitude: lon,
				    scale: 16, // 缩放比例
				    name: this.info.tree.name,
				    address: '', // 这个可能会影响地图的定位，所以可以选择不填
				    success(data) {
				
				    },
				    fail(err) {
				        console.log('导航失败', err);
				        uni.showToast({
				            title: "导航失败，位置不正确",
				            icon: "none"
				        })
				    }
				})
			}
           
        },
        get_chat(uid, infoId) {
            if (!this.userInfo.id) {
                uni.showModal({
                    title: "尚未登录",
                    content: "本功能需登录后才能进行在线联系，请先登录后尝试沟通！",
                    showCancel: false,
                    confirmText: "去登录",
                    success: (res) => {
                        if (res.confirm) {
                            return this.$do_login()
                        }
                    }
                })
            } else {
                uni.navigateTo({
                    url: `/pages/chat/index?uid=${uid}&infoId=${infoId}`
                })
            }
        },
        addComment(res) {
            this.$http.to_http('system/comments', {
                treeId: this.information_id,
                content: res.content,
                imageUrls: res.imageUrls,
                pid: res.pId
            }, 'POST', '评论中').then(res => {
                res = res.data
                if (res.code != 200) {
                    return uni.showToast({
                        title: res.msg,
                        icon: "none"
                    })
                }
                uni.showToast({
                    title: '评论成功',
                    icon: "none"
                })
                this.$refs.hbComment.closeInput()
                this.hasMore = false
				this.info.commentCount++
                this.get_comment(true)
                suc(true);
            }).catch(async err => {

            })
        },
        delComment(id) {
            this.$http.to_http('system/comments/deleteComment?id=' + id, '', 'POST', false).then(res => {
                res = res.data
                if (res.code != 200) {
                    return uni.showToast({
                        title: res.msg,
                        icon: "none"
                    })
                }
                uni.showToast({
                    title: res.msg,
                    icon: "none"
                })
                this.get_comment(true)
                suc(true);
            }).catch(async err => {

            })
        },
        getTree(data) {
            let result = [];
            let map = {};
            data.forEach(item => {
                map[item.id] = item;
            });
            data.forEach(item => {
                let parent = map[item.pid];
                if (parent) {
                    (parent.children || (parent.children = [])).push(item);
                } else {
                    result.push(item);
                }
            });
            return result;
        },
        textFormat(val) {
            if (val) {
                let newString = val.replace(/\n/g, '_@').replace(/\r/g, '_#');
                newString = newString.replace(/_#_@/g, '<br/>'); // IE7-8
                newString = newString.replace(/_@/g, '<br/>'); // IE9、FF、chrome
                newString = newString.replace(/\s/g, '&nbsp;'); // 空格处理
                return newString;
            }
        },
        get_contact() {
            uni.showModal({
                title: "隐私提示",
                content: "您正在请求获取对方联系方式，我们已记录此次操作，请您自行核实对方信息真实性，平台对此不承担任何责任，是否确认获取对方联系方式？",
                success: (res) => {
                    if (res.confirm) {
                        uni.showLoading({
                            title: "获取中"
                        })
                        setTimeout(() => {
                            uni.hideLoading()
                            if (this.info.contact == '') {
                                uni.showToast({
                                    title: "对方未公开联系方式",
                                    icon: "none"
                                })
                                return
                            }
                            if (uni.$u.test.mobile(this.info.contact)) {
                                uni.makePhoneCall({
                                    phoneNumber: this.info.contact
                                });
                                return;
                            }
                            uni.showModal({
                                title: "信息内容",
                                content: this.info.contact,
                                showCancel: false,
                                confirmText: "知道了",
                                success: (res) => {

                                }
                            })
                        }, 800)
                    } else if (res.cancel) {
                    }
                }
            })
        },
        get_info() {
            return new Promise((suc, err) => {
                this.$http.to_http(`search/trees/${this.information_id}`, {
                    lat: this.lat, lon: this.lon
                }, 'GET', false).then(res => {
                    res = res.data
                    if (res.code != 200) {
                        uni.showToast({
                            title: res.msg,
                            icon: "none"
                        })
                        setTimeout(() => {
                            uni.switchTab({
                                url: "/pages/index/index"
                            })
                        }, 1500)
                        return
                    }
                    this.is_loading = false
                    this.info = res.data
                    if (res.data.tree?.videos?.length > 0) {
                        this.swiperList = [{type: 'video', url: res.data.tree.videos[0]}]
                    }
                    console.log(44444, res.data.tree.images)
                    res.data.tree.images.forEach(item => {
                        this.swiperList.push({type: 'image', url: item})
                    })
                    console.log(44444, this.swiperList)
                    this.info.tree.description = this.formatRichText(this.unescapeFunc(res.data.tree.description))

                    // 微信小程序中主动计算第一张图片高度
                    this.calculateFirstImageHeight();

                    suc(true);
                }).catch(async err => {
                    if (err.statusCode = 401) {
                        // await this.get_info()
                        suc(true);
                    }
                })
            })
        },
        // 加载更多评论
        async loadMoreComments() {
            if (!this.hasMore || this.$refs.hbComment.loadStatus === 'loading') return;

            try {
                const res = await this.$http.to_http('system/comments/listByCursor', {
                    size: 10,
                    cursor: this.cursor,
                    treeId: this.information_id
                }, 'GET', false);

                const newComments = res.data.data.comments || [];
                if (newComments.length > 0) {
                    // 处理新评论数据
                    const processedComments = newComments.map(item => {
                        if (item.userId == this.userInfo.id) item.owner = true;
                        return item;
                    });

                    // 更新游标
                    this.cursor = newComments[newComments.length - 1].cursor;
                    this.hasMore = res.data.data.hasMore;

                    // 通知子组件更新数据
                    this.commentData = [...this.commentData, ...processedComments];
                    this.$refs.hbComment.updateLoadStatus(this.hasMore);
                } else {
                    this.hasMore = false;
                    this.$refs.hbComment.updateLoadStatus(false);
                }
            } catch (error) {
                console.error('加载更多评论失败:', error);
                this.$refs.hbComment.updateLoadStatus(this.hasMore);
            }
        },

        async get_comment(flag = false) {
            if (flag) {
                // 如果是刷新或首次加载，重置游标
                this.cursor = '';
                this.hasMore = true;
            }

            // 如果没有更多数据且不是首次加载，直接返回
            if (!this.hasMore && !flag) {
                this.$refs.hbComment?.updateLoadStatus(false);
                return;
            }

            try {
                const res = await this.$http.to_http('system/comments/listByCursor', {
                    size: 10,
                    cursor: this.cursor,
                    treeId: this.information_id
                }, 'GET', false);

                const newComments = res.data.data?.comments || [];
                this.hasMore = res.data.data?.hasMore || false;

                // 处理owner标记
                const processedComments = newComments.map(item => {
                    if (item.userId == this.userInfo?.id) item.owner = true;
                    return item;
                });

                if (flag) {
                    // 首次加载或刷新
                    this.commentData = processedComments;
                } else {
                    // 加载更多
                    this.commentData = [...this.commentData, ...processedComments];
                }

                // 更新游标
                if (newComments.length > 0) {
                    this.cursor = newComments[newComments.length - 1].cursor;
                }

                // 更新子组件加载状态
                if (this.$refs.hbComment) {
                    this.$refs.hbComment.updateLoadStatus(this.hasMore);
                }

                return res.data.data;
            } catch (error) {
                console.error('获取评论失败:', error);
                this.commentData = [];
                this.$refs.hbComment?.updateLoadStatus(false);
                return {comments: [], hasMore: false};
            }
        },
      // 在获取到富文本内容后进行处理
      formatRichText(html) {
        // 移除所有img标签的width属性
        let processed = html.replace(/<img[^>]*width="[^"]*"/gi, match => {
          return match.replace(/width="[^"]*"/gi, '')
        })

        // 移除所有img标签的内联width样式
        processed = processed.replace(/<img[^>]*style="[^"]*"/gi, match => {
          return match.replace(/width:\s*[^;]+;/gi, '')
        })

        // 给所有img标签添加统一的class
        processed = processed.replace(/<img/gi, '<img class="rich-img"')

        return processed

      },
      unescapeFunc(content) {
        if (!content) return '';
        try {
          const decoded = uni.base64ToArrayBuffer(content);
          const bytes = new Uint8Array(decoded);
          let str = '';
          let i = 0;
          while (i < bytes.length) {
            const byte1 = bytes[i++];
            if (byte1 < 0x80) {
              // 单字节（ASCII）
              str += String.fromCharCode(byte1);
            } else if (byte1 >= 0xC0 && byte1 < 0xE0) {
              // 双字节（如部分符号）
              const byte2 = bytes[i++];
              str += String.fromCharCode(((byte1 & 0x1F) << 6) | (byte2 & 0x3F));
            } else if (byte1 >= 0xE0 && byte1 < 0xF0) {
              // 三字节（如中文）
              const byte2 = bytes[i++];
              const byte3 = bytes[i++];
              str += String.fromCharCode(
                  ((byte1 & 0x0F) << 12) |
                  ((byte2 & 0x3F) << 6) |
                  (byte3 & 0x3F)
              );
            }
          }
          return str;
        } catch (e) {
          console.error("解码失败:", e);
          return content;
        }
      },
        // 纠错相关方法
        // 打开纠错弹框
        openCorrectionModal() {
            // 检查登录状态
            if (!uni.getStorageSync('token')) {
                uni.showModal({
                    title: '提示',
                    content: '请先登录后再进行纠错操作',
                    showCancel: false,
                    confirmText: '去登录',
                    success: (res) => {
                        if (res.confirm) {
                            uni.switchTab({
                                url: '/pages/my/my'
                            })
                        }
                    }
                })
                return
            }
            
            this.showCorrectionModal = true
        },
        
        // 关闭纠错弹框
        closeCorrectionModal() {
            this.showCorrectionModal = false
            // 清空表单数据
            this.correctionForm = {
                content: '',
                images: [],
                imageUrls: []
            }
        },
        
        // 阻止事件冒泡
        stopPrevent() {},
        
        // 纠错图片上传
        async onCorrectionImageUpload(event) {
            const lists = [].concat(event.file)
            let fileListLen = this.correctionForm.images.length
            
            // 添加上传中状态的图片
            lists.map((item) => {
                this.correctionForm.images.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            
            // 逐个上传图片
            for (let i = 0; i < lists.length; i++) {
                try {
                    const result = await this.uploadCorrectionImage(lists[i].url)
                    
                    // 更新上传状态
                    let item = this.correctionForm.images[fileListLen]
                    this.correctionForm.images.splice(fileListLen, 1, {
                        ...item,
                        status: 'success',
                        message: '',
                        url: result.url
                    })
                    
                    // 保存图片URL
                    this.correctionForm.imageUrls.push(result.url)
                    fileListLen++
                } catch (error) {
                    console.error('图片上传失败:', error)
                    // 移除上传失败的图片
                    this.correctionForm.images.splice(fileListLen, 1)
                    uni.showToast({
                        title: '图片上传失败',
                        icon: 'none'
                    })
                }
            }
        },
        
        // 上传纠错图片的Promise封装
        uploadCorrectionImage(url) {
            return new Promise((resolve, reject) => {
                uni.uploadFile({
                    url: this.$baseUrl + 'system/api/treeMedia/treeId/upload?mediaType=image&uploadType=correction',
                    filePath: url,
                    name: 'file',
                    formData: {},
                    header: {
                        Authorization: uni.getStorageSync('token')
                    },
                    success: (res) => {
                        try {
                            const data = JSON.parse(res.data)
                            if (data.code === 200) {
                                resolve(data.data)
                            } else {
                                reject(new Error(data.msg || '上传失败'))
                            }
                        } catch (error) {
                            reject(new Error('解析响应数据失败'))
                        }
                    },
                    fail: (error) => {
                        reject(error)
                    }
                })
            })
        },
        
        // 删除纠错图片
        onCorrectionImageDelete(event) {
            this.correctionForm.images.splice(event.index, 1)
            this.correctionForm.imageUrls.splice(event.index, 1)
        },
        
        // 提交纠错
        submitCorrection() {
            if (!this.correctionForm.content.trim()) {
                uni.showToast({
                    title: '请输入错误描述',
                    icon: 'none'
                })
                return
            }
            
            if (this.correctionForm.content.length < 5) {
                uni.showToast({
                    title: '错误描述至少5个字符',
                    icon: 'none'
                })
                return
            }
            
            const correctionData = {
                treeId: this.information_id,
                htmlContent: this.correctionForm.content,
                imageArray: this.correctionForm.imageUrls,
        
            }
            
            this.$http.to_http('system/content/saveContent', correctionData, 'POST', '提交中').then(res => {
                res = res.data
                if (res.code !== 200) {
                    uni.showToast({
                        title: res.msg || '提交失败',
                        icon: 'none'
                    })
                    return
                }
                
                uni.showToast({
                    title: '感谢您的反馈，我们会及时处理',
                    icon: 'success',
                    duration: 3000
                })
                
                // 关闭弹框
                this.closeCorrectionModal()
            }).catch(err => {
                console.error('提交纠错失败:', err)
                uni.showToast({
                    title: '网络错误，请稍后重试',
                    icon: 'none'
                })
            })
        },
        
        // 视频长按事件处理
        onVideoLongPress(e) {
            // #ifdef MP-WEIXIN
            const currentVideo = this.swiperList[this.currentIndex]
            if (!currentVideo || currentVideo.type !== 'video') {
                return
            }
            
            uni.showActionSheet({
                itemList: ['保存到相册', '转发给朋友', '分享到朋友圈'],
                success: (res) => {
                    switch(res.tapIndex) {
                        case 0:
                            this.saveVideoToAlbum(currentVideo.url)
                            break
                        case 1:
                            this.forwardVideo(currentVideo)
                            break
                        case 2:
                            this.shareToMoments(currentVideo)
                            break
                    }
                },
                fail: (err) => {
                    console.log('用户取消操作', err)
                }
            })
            // #endif
        },
        
        // 保存视频到相册
        saveVideoToAlbum(videoUrl) {
            // #ifdef MP-WEIXIN
            uni.showLoading({
                title: '保存中...'
            })
            
            // 先下载视频到临时路径
            uni.downloadFile({
                url: videoUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        // 保存到相册需要用户授权
                        uni.authorize({
                            scope: 'scope.writePhotosAlbum',
                            success: () => {
                                uni.saveVideoToPhotosAlbum({
                                    filePath: res.tempFilePath,
                                    success: () => {
                                        uni.hideLoading()
                                        uni.showToast({
                                            title: '保存成功',
                                            icon: 'success'
                                        })
                                    },
                                    fail: (err) => {
                                        uni.hideLoading()
                                        console.error('保存视频失败:', err)
                                        uni.showToast({
                                            title: '保存失败',
                                            icon: 'none'
                                        })
                                    }
                                })
                            },
                            fail: () => {
                                uni.hideLoading()
                                uni.showModal({
                                    title: '需要相册权限',
                                    content: '保存视频需要访问您的相册权限，请在设置中开启',
                                    confirmText: '去设置',
                                    success: (modalRes) => {
                                        if (modalRes.confirm) {
                                            uni.openSetting()
                                        }
                                    }
                                })
                            }
                        })
                    } else {
                        uni.hideLoading()
                        uni.showToast({
                            title: '下载视频失败',
                            icon: 'none'
                        })
                    }
                },
                fail: (err) => {
                    uni.hideLoading()
                    console.error('下载视频失败:', err)
                    uni.showToast({
                        title: '下载失败',
                        icon: 'none'
                    })
                }
            })
            // #endif
        },
        
        // 转发视频给朋友
        forwardVideo(video) {
            // #ifdef MP-WEIXIN
            // 在微信小程序中，可以使用button的open-type="share"来实现分享
            // 这里我们设置全局分享数据，供onShareAppMessage使用
            this.shareVideoData = {
                title: this.info.tree.name + ' - 视频',
                path: `/packageB/information/information?information_id=${this.information_id}&videoIndex=${this.currentIndex}`,
                imageUrl: video.poster || this.info.tree.imageUrl || ''
            }
            
            // 触发分享
            uni.showToast({
                title: '请点击右上角分享按钮',
                icon: 'none',
                duration: 2000
            })
            // #endif
        },
        
        // 分享到朋友圈
        shareToMoments(video) {
            // #ifdef MP-WEIXIN
            // 微信小程序不能直接分享到朋友圈，需要用户手动操作
            // 这里我们设置分享到朋友圈的数据
            this.shareVideoData = {
                title: this.info.tree.name,
                imageUrl: video.poster || this.info.tree.imageUrl || ''
            }
            
            uni.showModal({
                title: '分享提示',
                content: '请点击右上角菜单，选择"分享到朋友圈"',
                showCancel: false,
                confirmText: '知道了'
            })
            // #endif
        },

        look_img(index) {
            if (this.swiperList[index].type !== 'video') {
                    uni.previewImage({
                        current: this.info.tree.images[index],
                        urls: this.info.tree.images,
                    });
            }else {
                setTimeout(()=>{
                    this.videoContext.pause();
                },2000)
                this.autoplay = false;
            }

        }
    }
}
</script>

<style lang="scss" scoped>
.u-transition {
    z-index: 9999;
}

.u-album {
    display: inline-grid;
}


.item-footer {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 15rpx;
    align-items: center;

    .avatar {
        width: 38rpx;
        height: 38rpx;
        border-radius: 50%;
        border: 1px solid #797979;
    }
}

.map-class {
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.map-info {
    border-radius: 20rpx;
    padding: 10rpx 15rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 35rpx;
    background: linear-gradient(
            to right, /* 方向：从左到右 */
            #bfee9f, /* 红色（起始点） */
            #daf7d9 50%, /* 绿色（中点） */
            #7fe099 100% /* 蓝色（结束点） */
    );
    color: #25772f;
}

.waterfall-item__price {
    color: #f08526;
    font-size: 20px;
    font-weight: 800;
    width: 100%;
}

.fixed-bottom-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 140rpx;
    border-top: 1px solid #eee;
    background-color: #fff;
    z-index: 999;
    align-items: center;
    justify-content: center;
}

.bottom-button {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #000;
}

.button-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.button-content-img {
    width: 50rpx;
    height: 50rpx;
}

.button-text {
    font-size: 16px;
    margin-left: 10rpx;
}

.share-btn {
    width: 50rpx;
    background: transparent;
    border: 1px solid transparent;
    padding: 0;
}

.share-btn:after {
    border: 1px solid transparent;
}

/* 轮播图相关样式 */
.swiper-item {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-media {
    width: 100%;
    display: block;
    /* #ifdef MP-WEIXIN */
    height: auto;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    height: 100%;
    object-fit: cover;
    /* #endif */
}

/* 索引标签样式 */
.index-tag {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24rpx;
    padding: 6rpx 12rpx;
    border-radius: 16rpx;
    z-index: 5; /* 确保在轮播图上方 */
}

/* u-swiper下方数量显示小图标样式 */
.swiper-counter-icon {
    position: absolute;
    bottom: -76rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-counter-icon:active {
    transform: translateX(-50%) scale(0.95);
}

.counter-icon-container {
    display: flex;
    align-items: center;
    background-image: url('http://xaiohua.oss-cn-beijing.aliyuncs.com/medias/trees/treeId/images/796bf749-80ae-4352-8136-d1f97317c18d.jpg?Expires=4911628316&OSSAccessKeyId=LTAI5t93GNuNHEtLjPm4NWTG&Signature=4UYQnjCCD6f6%2BFcURi7g5SYApgM%3D');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 8rpx 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10rpx);
    transition: all 0.3s ease;
    width: 60rpx;
    height: 60rpx;
    position: relative;
    justify-content: center;
}

.swiper-counter-icon:hover .counter-icon-container {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
}

.counter-text {
    position: absolute;
    bottom: 8rpx;
    right: 8rpx;
    font-size: 24rpx;
    font-weight: 600;
    color: #fff;
    background-color: rgba(37, 119, 47, 0.8);
    border-radius: 10rpx;
    padding: 2rpx 6rpx;
    min-width: 20rpx;
    text-align: center;
    line-height: 1.2;
}

.u-nav-slots {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 260rpx;
    height: 60rpx;
    background-color: #f3f4f6;
    border-radius: 50rpx;
    margin-left: 30rpx;
    padding-left: 20rpx;
}

.user-info {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
    padding: 5rpx 10rpx;
    border-radius: 30rpx;
    background-color: #f5f5f5;
}

.user-avatar {
    width: 60rpx;          /* 设置头像宽度 */
    height: 60rpx;         /* 高度与宽度相同 */
    border-radius: 50%;    /* 关键：50%的圆角实现正圆形 */
    margin-right: 10rpx;   /* 与用户名的间距 */
    border: 1px solid #eee; /* 可选：添加浅色边框 */
    background-color: #f5f5f5; /* 可选：默认背景色 */
}
.user-name {
    font-size: 12px;
    color: #666;
    max-width: 120rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 确保选中/未选中的指示器都是圆形 */

::v-deep .u-swiper-indicator__wrapper__dot--active
{
   width: 5px !important;
}

/* 纠错按钮样式 */
.correction-button-wrapper {
    display: flex;
    justify-content: flex-start;
}

.correction-button {
    display: flex;
    align-items: center;
    padding: 8rpx 16rpx;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20rpx;
    transition: all 0.3s ease;
}

.correction-button:active {
    background-color: #e9ecef;
    transform: scale(0.98);
}

.correction-text {
    font-size: 24rpx;
    color: #666;
    margin-left: 8rpx;
}

/* 纠错弹框样式 */
.correction-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
}

.correction-content {
    background-color: #fff;
    border-radius: 20rpx;
    width: 100%;
    max-width: 600rpx;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.correction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;
}

.correction-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.correction-close {
    padding: 10rpx;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.correction-close:active {
    background-color: #f5f5f5;
}

.correction-form {
    flex: 1;
    padding: 0 30rpx;
    overflow-y: auto;
}

.form-group {
    margin-bottom: 40rpx;
}

.form-label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: 500;
}

.correction-textarea {
    width: 100%;
    min-height: 200rpx;
    padding: 20rpx;
    border: 1px solid #e0e0e0;
    border-radius: 10rpx;
    font-size: 28rpx;
    line-height: 1.5;
    box-sizing: border-box;
    background-color: #fafafa;
    resize: none;
}

.correction-textarea:focus {
    border-color: #25772f;
    background-color: #fff;
    outline: none;
}

.word-count {
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
}

.upload-section {
    margin-top: 20rpx;
}

.correction-footer {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
    padding: 30rpx;
    border-top: 1px solid #f0f0f0;
}

.correction-btn {
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    font-size: 28rpx;
    text-align: center;
    transition: all 0.3s ease;
    min-width: 120rpx;
}

.cancel-btn {
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #e0e0e0;
}

.cancel-btn:active {
    background-color: #e9ecef;
}

.submit-btn {
    background-color: #25772f;
    color: #fff;
    border: 1px solid #25772f;
}

.submit-btn:active {
    background-color: #1e5f26;
}
</style>
